<template>
  <div class="container">
    <div class="app-container">
      <el-card class="box-card">
        <el-row type="flex" justify="space-between">
          <el-col :span="24">
            <el-button size="medium" type="primary" @click="add(null,'add')">添加页面</el-button>
          </el-col>
          <el-col :span="24">
            <el-input v-model="params.title_contains" placeholder="请输入关键字" @change="search">
              <el-button slot="append" @click="search">筛选</el-button>
            </el-input>
          </el-col>
        </el-row>
        <el-divider />
        <el-table :data="pagesList" style="width: 100%" border>
          <el-table-column align="center" label="标题" prop="title" />
          <el-table-column align="center" label="内容" prop="content">
            <template v-slot="{row}">
              <div v-html="row.content" />
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template v-slot="{row}">
              <el-button size="mini" plain type="primary" @click="edit(row.id,'edit')">编辑</el-button>
              <el-button size="mini" plain type="danger" @click="del(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-divider />
        <!-- 分页器 -->
        <el-row type="flex" justify="center">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            @current-change="currentPage"
          />
        </el-row>
      </el-card>
      <!-- 添加、编辑页面弹窗 -->
      <el-dialog :title="title" :visible="showDialog" width="800px" @close="cancel">
        <el-form ref="form" :model="formData" :rules="rules">
          <el-form-item label="标题" label-width="80px" prop="title">
            <el-input v-model="formData.title" />
          </el-form-item>
          <el-form-item label="内容" label-width="80px" prop="content">
            <template>
              <!-- bidirectional data binding（双向数据绑定） -->
              <quill-editor
                v-model="formData.content"
                @blur="$refs.form.validateField('content')"
              />
            </template>
          </el-form-item>
          <el-form-item>
            <el-row type="flex" justify="end">
              <el-button size="mini" type="primary" @click="submit">确定</el-button>
              <el-button size="mini" @click="cancel">取消</el-button>
            </el-row>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>

</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import { getPagesList, getPagesCount, addPages, pagesDetail, updatePages, deletePages } from '@/api/pages'
export default {
  components: {
    quillEditor
  },
  data() {
    return {
      pagesList: [], // 页面列表
      params: {
        _limit: 2, // 每页的获取条数
        _start: 0, // 开始获取的位置
        title_contains: '' // 模糊搜索title
      },
      showDialog: false, // 控制弹窗显示
      formData: {
        title: '', // 标题
        content: '' // 内容
      },
      rules: {
        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
        content: [{ required: true, message: '请输入内容', trigger: 'blur' }]
      },
      total: 1, // 页面总数量
      openTitle: '' // 弹窗标题
    }
  },
  computed: {
    title() {
      if (this.openTitle === 'add') {
        return '添加页面'
      } else {
        return '编辑页面'
      }
    }
  },
  created() {
    this.getPagesList()
    this.getPagesCount()
  },
  methods: {
    async getPagesList() { // 获取页面列表
      const res = await getPagesList(this.params)
      this.pagesList = res.data
    },
    async getPagesCount() { // 获取页面数量
      const res = await getPagesCount(this.params.title_contains)
      this.total = res.data * 5
    },
    async currentPage(val) { // 点击分页实现
      this.params._start = (val - 1) * this.params._limit
      await this.getPagesList()
    },
    add(id, txt) { // 添加
      this.openTitle = txt
      this.showDialog = true
    },
    async submit() { // 确认添加
      // 表单校验
      await this.$refs.form.validate()
      if (this.openTitle === 'edit') {
        await updatePages(this.formData)
        this.$message.success('修改页面成功')
      } else {
        await addPages({
          content: this.formData.content,
          title: this.formData.title
        })
        // 提示
        this.$message.success('添加页面成功')
      }
      // 退出弹窗
      this.cancel()
      // 刷新列表
      this.getPagesList()
      this.getPagesCount()
    },
    cancel() { // 关闭弹窗
      this.showDialog = false
      // 清空表单数据
      this.formData = {
        title: '', // 标题
        content: '' // 内容
      }
    },
    async edit(id, txt) { // 数据回显
      this.openTitle = txt
      const res = await pagesDetail(id)
      this.formData = res.data
      this.showDialog = true
    },
    async del(id) { // 删除页面
      await deletePages(id)
      this.$message.success('删除成功')
      if (this.pagesList.length === 0) {
        this.params._start--
      }
      // 刷新列表
      this.getPagesCount()
      this.getPagesList()
      console.log(this.total)
    },
    async search() { // 筛选
      console.log(111)
      const res = await getPagesCount({
        title_contains: this.params.title_contains
      })
      // 刷新页面
      this.total = res.data
      this.getPagesList()
    }
  }
}
</script>

<style lang="scss" scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  ::v-deep .ql-container {
    height: 200px;
  }
</style>
